<template>
  <div id="login-box" >
    <div class="padding-box">
      <div class="close-icon" id="close-icon" ><svg t="1612002036751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1992" width="20" height="20">
        <path d="M846.005097 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519L96.632851 254.131955c-43.644009-43.644009-43.644009-114.348328 0-157.992337s114.348328-43.644009 157.992337 0L925.001265 766.515694c43.644009 43.644009 43.644009 114.348328 0 157.992337C903.17926 946.330036 874.592179 957.24155 846.005097 957.24155z" p-id="1993" fill="#ffffff"></path>
        <path d="M175.62902 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519-43.644009-43.644009-43.644009-114.348328 0-157.992337L767.008928 96.139617c43.644009-43.644009 114.348328-43.644009 157.992337 0s43.644009 114.348328 0 157.992337L254.625188 924.508032C232.803183 946.330036 204.216101 957.24155 175.62902 957.24155z" p-id="1994" fill="#ffffff"></path></svg></div>
      <div class="in-box"><p>{{$t('m.welcome')}}</p></div>
      <div class="log-sign">
        <div class="log-sign-box">
          <p class="logIn" id="logIn">{{$t('m.logIn')}}</p>
          <p class="signUp" >{{$t('m.signUp')}}</p>
        </div>
      </div>
      <form id="username-password" class="loginForm" ref="loginForm" :model="loginForm">
        <div id="username">
          <p>{{$t('m.username')}}</p>
          <input v-model="loginForm.username" type="text" class="input-100"  minlength="4" maxlength="24" spellcheck ='false' oninput = " value=value.replace(/[^\w]/ig,'')">
        </div>
        <div id="password">
          <p>{{$t('m.password')}}</p>
          <input v-model="loginForm.password" type="password" class="input-100" minlength="8" maxlength="72" spellcheck ='false'>
        </div>
      </form>
      <div id="login-button">
        <button class="button" @click="login">{{$t('m.logIn')}}</button>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery';

  export default {
    name: 'logIn-signUp-Box',
    data(){
      return {
        loginForm: {
          username: '',
          password: '',
        },
        testList:{
          gameId: '1',
        }
      }},
    methods: {
      async login(){
        const username = $("#username input").val()
        const password = $("#password input").val()
        // console.log(password,username)
       if(username !== '' && password !== ''){
          const {data:res} = await this.$axios(
            {
              method: "post",
              url: "v1/login",
              data: this.loginForm,
              headers: {
                "token": sessionStorage.token,
              }
            }
          )
          if(res.code === 200){
            this.$message.success("登陆成功")
            // this.$store.commit('hasLogin','true')
            window.sessionStorage.setItem("token", res.data.token)
            console.log(res.data.user.userId)
            const {data:_res} = await this.$axios.post('v1/getUserInfo',{userId:res.data.user.userId})
            window.sessionStorage.setItem("user",JSON.stringify(_res.data))//存储user对象
            location.reload();
          }else if(res.code === 500){
            this.$message.error("登陆失败，请检查账号或密码！")
          }
        }else if(username === '' || password === ''){
          this.$message.error("账号或密码不能为空")
        }
      },
    },
    created() {


    }
  }
</script>

<style scoped>

</style>
